<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <link rel="stylesheet" th:href="@{'/webjars/layui/2.3.0/css/layui.css'}">
    <link rel="shortcut icon" th:href="@{'/img/favicon.ico'}">
    <link rel="stylesheet" th:href="@{'/webjars/font-awesome/4.7.0/css/font-awesome.css'}">
    <script language="JavaScript" th:src="@{'/webjars/jquery/3.3.1/dist/jquery.min.js'}"></script>
    <script language="JavaScript" th:src="@{'/js/dateformat.js'}" charset="utf-8"></script>
    <script language="JavaScript">
        $(function () {
            $("#reset").on("click", function () {
                $("#oldPwd").val("");
                $("#newPwdInput").val("");
                $("#okPwd").val("");
            });
            layui.use(["laydate", "form"], function () {
                var $form = layui.form;

                $form.verify({
                    password: function (value, item) {
                        var val = $(item).prop("id");
                        if (val === "oldPwd") {
                            val = "旧密码";
                        }
                        if (val === "newPwdInput") {
                            val = "新密码";
                        }
                        if (val === "okPwd") {
                            val = "确认密码";
                        }
                        console.log(val);

                        if (!new RegExp(/^[A-Za-z0-9_-]{6,18}$/).test(value)) {
                            return val + "必须是 6-18 位，并且是大小写数字下划线等";
                        }
                    },
                    okPwd: function (value, item) {
                        var newPwd = $("#newPwdInput").val();
                        if (value != newPwd) {
                            return "两次密码不一致";
                        }
                    }
                });

                $form.on("submit(changePwd)", function (data) {
                    $.ajax({
                        url: "/stu/user/oldPwd/" + $("#oldPwd").val(),
                        type: "post",
                        dataType: "json",
                        success: function (res) {
                            console.log(res);
                            if (res.code === 400) {
                                console.log(res.msg);
                                layer.msg(res.msg, {
                                    icon: 5,
                                });
                            }
                            if (res.code === 200) {
                                $.ajax({
                                    url: data.form.action,
                                    type: data.form.method,
                                    data: {
                                        newPwd: data.field.newPwd
                                    },
                                    dataType: "json",
                                    success: function (res) {
                                        console.log(res);
                                        if (res.code === 400) {

                                        }
                                        if (res.code === 200) {
                                            layer.msg("密码修改成功", {icon: 6});
                                            $("#reset").click();
                                        }
                                    }
                                });
                            }
                        }
                    });
                    return false;
                });
            });
        });
    </script>

</head>
<body>

<ul th:insert="~{fragment/header :: top}"></ul>
<br><br><br><br>

<div class="layui-container layui-fluid layui-row">
    <form th:action="@{'/user/changePassword'}" th:method="post" class="layui-form">
        <div class="layui-form-item layui-col-lg-offset2 layui-col-lg6 layui-form-pane">
            <label class="layui-form-label">旧密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" id="oldPwd" lay-verify="password" placeholder="请输入旧密码"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-col-lg-offset2 layui-col-lg6 layui-form-pane">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="password" name="newPwd" id="newPwdInput" lay-verify="password|newPwd" placeholder="请输入新密码"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-col-lg-offset2 layui-col-lg6 layui-form-pane">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="okPwd" id="okPwd" lay-verify="password|okPwd" placeholder="请再次输入新密码"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-col-lg-offset3 layui-col-lg4">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="changePwd">确认修改</button>
                <button type="reset" class="layui-btn layui-btn-primary" id="reset">重置</button>
            </div>
        </div>
    </form>
</div>
<div th:insert="~{fragment/header :: footer}"></div>
</body>
<script language="JavaScript" th:src="@{'/webjars/layui/2.3.0/layui.all.js'}" charset="utf-8"></script>
</html>